<template>
  <DialogCom :draggable="true" :title="title" :width="'500'" :visible="isVisible" @close="close" @confirm="confirm">
    <template v-slot:content>
      <div class="add">
        <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="80px" class="demo-ruleForm"
          status-icon>
          <!-- 存储方式选择 -->
          <el-form-item label="名称:" prop="name">
            <el-input v-model="formData.name" placeholder="请输入数据名称" />
          </el-form-item>
          <el-form-item label="最小高度:" prop="minH">
            <el-input type="number" v-model="formData.minH" placeholder="请输入最小高度" @change="changeMinH" />
          </el-form-item>
          <el-form-item label="最大高度:" prop="maxH">
            <el-input type="number" v-model="formData.maxH" placeholder="请输入最大高度" @change="changeMaxH" />
          </el-form-item>
          <el-form-item label="其他属性:" prop="maxH">
            <div class="content">
              <el-table ref="tableRef" :data="infoList" :cell-style="cellStyle" :header-cell-style="headCellStyle"
                max-height="200">
                <el-table-column align="center" type="index" label="序号" width="60" />
                <el-table-column align="center" prop="key" label="名称" width="100" />
                <el-table-column prop="value" label="值" :show-overflow-tooltip="true" width="auto">
                  <template #default="scope">
                    <div>
                      <div class="result" v-if="scope.row.key === 'result'">{{ scope.row.value }}</div>
                      <div v-else-if="['String', 'Json', 'Time'].includes(scope.row.type)">
                        <el-input type="text" v-model.lazy="scope.row.value" @change="edit(scope.row)" />
                      </div>
                      <div v-else-if="scope.row.type === 'Boolean'">
                        <el-switch v-model="scope.row.value" size="small" @change="edit(scope.row)" />
                      </div>
                      <div v-else-if="['Int8', 'Int16', 'Int32', 'Int64', 'Float', 'Double'].includes(scope.row.type)">
                        <el-input v-model="scope.row.value" type="number" @change="edit(scope.row, 'number')" />
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-form-item>

        </el-form>
      </div>
    </template>
  </DialogCom>
</template>

<script setup>
import { ref, defineProps, onMounted } from 'vue'
import DialogCom from '@/components/common/DialogCom.vue'
import { cellStyle, headCellStyle } from "@/scripts/tableStyle";

const ruleFormRef = ref('')
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
  close: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  updateInfo: {
    type: Object,
    default: () => { },
  },
  info: {
    type: Object,
    default: () => [],
  },
})
const emits = defineEmits(['close', 'confirm'])
const formData = ref({
  tileServiceName: '',
  id: '',
  name: '',
  minH: 0,
  maxH: 1,
})

const rules = ref({
  // name: [{ required: true, message: '请输入数据名称', trigger: 'blur' }],
})

const changeMinH = (val) => {
  // 将输入值强制转换为数字，并确保不小于 0.1
  const numValue = Number(val);
  if (!numValue || isNaN(numValue)) {
    formData.value.minH = 0
  }
}

const changeMaxH = (val) => {
  // 将输入值强制转换为数字，并确保不小于 0.1
  const numValue = Number(val);
  if (!numValue || isNaN(numValue)) {
    formData.value.maxH = 0
  }
}
onMounted(() => {
  if (!props.updateInfo) return
  const info = props.updateInfo
  formData.value = {
    tileServiceName: info.tileSerivceName,
    id: info.id,
    name: info.name,
    minH: info.minH,
    maxH: info.maxH,
  }
})
const close = () => {
  emits('close')
}
// 确认
const confirm = () => {
  ruleFormRef.value.validate((valid) => {
    if (!valid) return;
    formData.value.minH = Number(formData.value.minH)
    formData.value.maxH = Number(formData.value.maxH)
    emits('confirm', { ...formData.value, fields: { ...changedProperty.value }, })
  })
}

const tableRef = ref(null)

const changedProperty = ref({})
const infoList = ref(props.info)


const edit = (row, type) => {
  if (type == 'number') {
    const numValue = Number(row.value);
    if (!numValue || isNaN(numValue)) {
      row.value = 0
    }
  }

  changedProperty.value[row.key] = (type == 'number' ? Number(row.value) : row.value)
}
</script>

<style scoped>
.add {
  padding-left: 10px;
  padding-right: 10px;
}

.content {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.content>div:last-child {
  flex-grow: 1;
}

.right .el-input {
  height: 30px !important;
}

.el-select__wrapper {
  height: 28px !important;
}

.el-input {
  height: 30px !important;
}

.result {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
  background-color: transparent !important;
  color: #333 !important;

}
</style>
